<template>
	<div>
		<!-- 查询框 -->
		<el-form :inline="true" :model="queryForm" class="demo-form-inline">
		  <el-form-item label="名称">
		    <el-input v-model="queryForm.name" placeholder="菜单名称"></el-input>
		  </el-form-item>
		  <el-form-item label="选择菜单">
		    <el-select v-model="queryForm.parentId" placeholder="选择菜单" clearable="">
		      <el-option v-bind:label="item.name" :value="item.id" v-for="item in menuList"></el-option>
		    </el-select>
		  </el-form-item>
		  <el-form-item>
		    <el-button type="primary" @click="querySubmit">查询</el-button>
		  </el-form-item>
		</el-form>
		<!-- 列表 -->
		<el-table
		  :data="tableData"
		  @selection-change="handleSelectionChange"
		  style="width: 100%">
		  <!-- 多选 -->
		  <el-table-column
		  type="selection"
		  ></el-table-column>
		  
		  <el-table-column
		  label="#" prop="id"
		  width="50"
		  ></el-table-column>
		  
		  <el-table-column
			prop="name"
			label="名称"
			width="100">
			<template slot-scope="scope">
				<span :title="scope.row.iconCls">{{scope.row.name}}</span>	 
			</template>
		  </el-table-column>
		  
		  <el-table-column
			prop="path"
			label="路径"
			width="100">
			<template slot-scope="scope">
				<span :title="scope.row.component">{{scope.row.path}}</span>	 
			</template>
		  </el-table-column>
		 
		  <el-table-column
		  			prop="parentName"
		  			label="所属菜单"
		  			width="100">
		  </el-table-column>
		  
		  <el-table-column label="状态">
			  <template slot-scope="scope">
				  {{scope.row.enabled==1?'启用':'停用'}}
			  </template>
		  </el-table-column>
		 
		  
		  <el-table-column label="创建时间" prop="createTime">
		  </el-table-column>
		  <!-- 分页 -->
		  <el-table-column label="操作">
			  <template slot-scope="scope">
				  <el-button size="mini" @click="edit(scope.row)">编辑</el-button>
				  <el-button size="mini" type="danger" @click="del(scope.row.id)">删除</el-button>
			  </template>
		  </el-table-column>
		  
		</el-table>
		
		<el-row>
		  <el-col :span="10">
			  <el-button size="mini" @click="add">添加</el-button>
		  </el-col>
		  <el-col :span="14">
			  <el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="queryForm.currentPge"
					:page-sizes="[3, 5, 8, 10]"
					:page-size="queryForm.pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total">
				  </el-pagination>
		  </el-col>
		</el-row>
		
		
		
		<!-- 对话框添加班级信息 -->
		<el-dialog
		  title="菜单/添加/编辑"
		  :visible.sync="dialogVisible"
		  width="40%"
		  :before-close="handleClose">
		  <el-form ref="form" :model="form" label-width="80px">
		    <el-form-item label="菜单名称">
		      <el-input v-model="form.name" placeholder="请输入名称"></el-input>
		    </el-form-item>
		    <el-form-item label="所属菜单">
		      <el-select v-model="form.parentId" placeholder="选择菜单" clearable="">
		        <el-option label="请选择" :value="0"></el-option>
				<el-option v-bind:label="item.name" :value="item.id" v-for="item in menuList"></el-option>
		      </el-select>
		    </el-form-item>
			
			<el-form-item label="菜单图标">
			  <el-input v-model="form.iconCls"></el-input>
			</el-form-item>
			
			<el-form-item label="组件名称" v-if="form.parentId>0">
			  <el-input v-model="form.component" placeholder="vue组件名称"></el-input>
			</el-form-item>
			
			<el-form-item label="组件路径" v-if="form.parentId>0">
			  <el-input v-model="form.path" placeholder="vue组件访问路径,/开始"></el-input>
			</el-form-item>
			
		    <el-form-item label="是否启用">
		      <el-switch v-model="form.enabled"></el-switch>
		    </el-form-item>
		  </el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="save">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				//查询条件
				queryForm:{
					pageNum:1,
					pageSize:3
				},
				//列表数据
				tableData:[],
				//table选择数据Id数组
				selecteIds:[],
				//总页数
				pageCount:1,
				menuList:[],
				dialogVisible:false,
				form:{parentId:0,enabled:true,iconCls:"el-icon-s-management"},
				userInfo:{},
				total:0
			}
		},
		methods:{
			handleClose(){
				this.dialogVisible = false;
			},
			save(){
				console.log(this.form);
				//ajax提交班级信息
				this.axios.post(this.$baseUrl+"menu/save",this.form).then(res=>{
					if(res){
						//关闭对话框
						this.form={};
						this.dialogVisible = false;
						this.$message({
							message:"添加成功",
							type:"success"
						});
						this.querySubmit();
					}
				})
			},
			add(){
				this.form = {parentId:0,enabled:true,iconCls:"el-icon-s-management"};
				this.dialogVisible = true;
			},
			edit(row){
				this.dialogVisible = true;
				this.form = row;
			},
			del(id){
				console.log(id)
				this.$confirm('此操作删除无法修复, 是否继续?', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
				  //调用ajax执行删除操作
				  this.axios.post(this.$baseUrl+"/menu/batchDel",{idList:[id]}).then(res=>{
				  	console.log(res);
				  	//刷新列表页
				  	if(res.data){
				  		this.querySubmit();
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
				  	}else{
				  		this.$message("删除失败");
				  	}
				  	
				  })
				}).catch(() => {
				  this.$message({
					type: 'info',
					message: '已取消删除'
				  });          
				});
			},
			handleSelectionChange(rows){
				console.log(rows);
				// let ids = rows.map(function(row){return row.id});
				let ids = rows.map(row=>{return row.id});
				this.selecteIds = ids;
				console.log("selecteIds:"+this.selecteIds);
			},
			handleCurrentChange(current){
				this.queryForm.pageNum = current;
				this.list();
			},
			querySubmit(){
				//发送ajax请求，根据queryForm查询数据
				console.log(this.queryForm);
				this.queryForm.pageNum=1;
				this.list();
				
			},
			//列表页数据
			list(){
				//发送ajax请求，根据queryForm查询数据
				this.axios.get(this.$baseUrl+"menu/getPageInfo",{params:this.queryForm}).then(res=>{
					//axios封装了结果，res.data是我们接口的数据
					console.log(res.data);
					this.tableData = res.data.data.list;
					//设置分页数量、当前页
					this.pageCount = res.data.data.total;
					this.queryForm.pageNum = res.data.data.pageNum;
					this.total = res.data.data.total
				})
			},
			listMenu(){
				this.axios.get(this.$baseUrl+"menu/getMenuListByParentId",{params:{parentId:"0"}}).then(res=>{
					this.menuList = res.data.data;
				})
			},
			//分页：页数改变事件
			handleSizeChange(val){
				console.log("handleSizeChange",val)
				this.queryForm.pageSize=val;
				this.queryForm.pageNum=1;
			},
			//当前页
			handleCurrentChange(val){
				console.log("handleCurrentChange",val)
				this.queryForm.pageNum=val;
				this.list();
				
			}
		},
		created(){
			this.list();
			this.listMenu();
		}
	}
</script>

<style scoped>
	.el-row {
		margin-top: 20px;
	}
</style>
